<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加按钮 -->
    <el-button @click="addInfo" class="btnInfo" type="success" size="small"
      >添加</el-button
    >
    <!-- 数据列表的渲染 -->
    <v-list @edit="edit"></v-list>
    <!-- 弹框部分 -->
    <v-dialog ref="diaRef" :isAdd="isAdd" :isShow="isShow" @cancel="cancel"></v-dialog>
    <!-- <div ref="diaRef" >555</div> -->
  </div>
</template>

<script lang="ts" setup>
//引入vue的一些方法
import { ref } from "vue";
//引入封装好的组件
import vList from "./list.vue";
import vDialog from "./dialog.vue";
//设置一个属性 用于控制弹框的显示隐藏
let isShow = ref(false);
let isAdd = ref(true)
let diaRef = ref()
//定义一个打开弹框的事件
const addInfo = () => {
  //修改ref 要去修改它的value
  isShow.value = true;
  isAdd.value = true
};
//封装一个关闭弹框事件
const cancel = (e: boolean) => {
  isShow.value = e;
};
const edit = (e:number)=>{
  //打开弹框
  isShow.value = true
  isAdd.value = false
  console.log(diaRef.value,'节点值')
  diaRef.value.lookup(e)
}
</script>

<style lang="less" scoped>
.btnInfo {
  margin: 10px;
}
</style>
